<route lang="yaml">
meta:
  enabled: false
                </route>

<script lang="ts" setup>
import type { VxeFormEvents, VxeFormInstance, VxePagerEvents, VxeTableEvents, VxeTableInstance } from 'vxe-table'
import { ElMessage } from 'element-plus'
import {
  BMap,
  type MapProps, type MapType,

} from 'vue3-baidu-map-gl'
import { useBrowserLocation } from 'vue3-baidu-map-gl'
import apiCar from '@/api/modules/car'

const type = ref<MapType>('BMAP_NORMAL_MAP')
const mapSetting = ref<MapProps>({
  enableDragging: true,
  enableInertialDragging: true,
  enableScrollWheelZoom: false,
  enableContinuousZoom: true,
  enableResizeOnCenter: true,
  enableDoubleClickZoom: false,
  enableKeyboard: true,
  enablePinchToZoom: true,
  enableAutoResize: true,
  enableTraffic: false,
})

const map = ref()
const { get, location, isLoading, isError, status } = useBrowserLocation(null, () => {
  map.value.resetCenter()
})
/// ///////////////////////////////////地图相关
const pageMap = reactive({
  containerHeight: '',
  center: {} as any,
  mapHandle: {} as any,
})
const mapHandle = ref()
/// ///////////////////////////////////地图相关
const g = useGlobalProperties()
const refModalForm = ref<VxeFormInstance>()
const refModalOrderTable = ref<VxeTableInstance>()
const pageData = reactive({
  loading: false,
  orderLoading: false,
  tableData: [] as any[],
  carrierList: [] as any[],
  carList: [] as any[],
  driverList: [] as any[],
  statusList: [] as any[],
  // 弹窗相关
  modalShow: false,
  modalName: '',
  curBill: {} as any,
})
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
interface ModalForm {
  id: number
  sn: string
  carrier_name: string
  carrier_id: string
  car_sn: string
  car_id: string
  driver_name: string
  driver_id: string
  status: string
}
const modalFormData = ref<ModalForm>({
  id: 0,
  sn: '',
  carrier_name: '',
  carrier_id: '',
  car_sn: '',
  car_id: '',
  driver_name: '',
  driver_id: '',
  status: '',
})
const formRules = {
  name: [
    { required: true, message: '请输入名称' },
  ],
}
interface FormDataVO {
  sn: string
}
const formTop = reactive<FormDataVO>({
  sn: '',
})
const tableRef = ref<VxeTableInstance>()
/////////////////////////////////////////////
const cellCarClick: VxeTableEvents.CellClick<any> = ({ row }) => {
  // pageMap.center.lat = row.lat
  // pageMap.center.lng = row.lng
  pageMap.mapHandle.panTo({ lat: row.lat, lng: row.lng })
}
/// ///////////////////////////////////api
function apiPage(req: any) {
  pageData.loading = true
  apiCar.page(req).then((res) => {
    pageData.tableData = res.data.list
    tablePage.total = res.data.total
    pageData.loading = false
  }).catch((err) => {
    ElMessage.error({
      message: JSON.stringify(err),
      center: true,
    })
    pageData.loading = false
  })
}
/// ///////////////////////////////////翻页
const submitTopEvent: VxeFormEvents.Submit = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    sn: formTop.sn,
  }
  apiPage(req)
}

const resetTopEvent: VxeFormEvents.Reset = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    sn: formTop.sn,
  }
  apiPage(req)
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    sn: formTop.sn,
  }
  apiPage(req)
}
////////////////////
function onResize() {
  pageMap.containerHeight = `${document.getElementById('map-container')?.clientHeight}px`
}
function handleInitd({ map }: any) {
  pageMap.mapHandle = map
  pageMap.mapHandle.centerAndZoom({ lat: pageData.tableData[0].lat, lng: pageData.tableData[0].lng })
}
/// ///////////////////////////////////生命周期
onMounted(() => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    sn: formTop.sn,
  }
  apiPage(req)
  pageMap.containerHeight = `${document.getElementById('map-container')?.clientHeight}px`
  window.addEventListener('resize', onResize)
})
onUnmounted(() => {
  window.removeEventListener('resize', onResize)
})
</script>

<template>
  <div class="all-page">
    <div class="page-wrap">
      <div class="page-top">
        <vxe-form :data="formTop" style="padding-left: 5px;" @submit="submitTopEvent" @reset="resetTopEvent">
          <vxe-form-item title="车牌号" field="sn" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.sn" placeholder="请输入车牌号" clearable />
            </template>
          </vxe-form-item>
          <vxe-form-item>
            <template #default>
              <vxe-button type="submit" status="primary" content="搜索" />
              <vxe-button type="reset" content="重置" />
            </template>
          </vxe-form-item>
        </vxe-form>
      </div>
      <page-main>
        <vxe-table
          ref="tableRef" auto-resize border stripe :loading="pageData.loading"
          :column-config="{ resizable: true }" :row-config="{ isHover: true }"
          :checkbox-config="{ highlight: true, range: true }" :data="pageData.tableData" align="center"
          header-align="center" highlight-current-row @cell-click="cellCarClick"
        >
          <vxe-column type="checkbox" width="50" />
          <vxe-column field="sn" align="center" title="车辆" />
        </vxe-table>
      </page-main>
      <div class="page-opration-container">
        <vxe-pager
          v-model:current-page="tablePage.currentPage" v-model:page-size="tablePage.pageSize"
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          :total="tablePage.total" @page-change="handlePageChange"
        />
      </div>
    </div>
    <div class="right-side">
      <div class="side-top">
        <label>
          <input v-model="mapSetting.enableScrollWheelZoom" type="checkbox">
          鼠标缩放
        </label>
        <br>
        <label>
          <input v-model="mapSetting.enableDragging" type="checkbox">
          拖拽
        </label>
        <br>
        <label>
          <input v-model="mapSetting.enableInertialDragging" type="checkbox">
          惯性拖拽
        </label>
        <br>
        <label>
          <input v-model="mapSetting.enablePinchToZoom" type="checkbox">
          双指缩放地图
        </label>
        <br>
        <label>
          <input v-model="mapSetting.enableKeyboard" type="checkbox">
          键盘操作
        </label>
        <br>
        <label>
          <input v-model="mapSetting.enableDoubleClickZoom" type="checkbox">
          双击缩放，左键双击放大、右键双击缩小
        </label>
        <br>
        <label>
          <input v-model="mapSetting.enableContinuousZoom" type="checkbox">
          双击平滑缩放效果
        </label>
        <br>
        <label>
          <input v-model="mapSetting.enableTraffic" type="checkbox">
          显示交通路况
        </label>
        <br>
        <br>
        地图类型：
        <select id="" v-model="type" name="">
          <option value="BMAP_NORMAL_MAP">
            常规地图 BMAP_NORMAL_MAP
          </option>
          <option value="BMAP_EARTH_MAP">
            地球模式 BMAP_EARTH_MAP
          </option>
          <option value="BMAP_SATELLITE_MAP">
            卫星图 BMAP_EARTH_MAP
          </option>
        </select>
        <br>
        <br>
      </div>
      <page-main id="map-container">
        <BMap
          ref="map" :zoom="10" :center="pageMap.center" ak="05UpzezEEczsCBgeK1m2LpOcznLuyjY3" :map-type="type" :height="pageMap.containerHeight" :enable-dragging="mapSetting.enableDragging" :enable-inertial-dragging="mapSetting.enableInertialDragging" :enable-scroll-wheel-zoom="mapSetting.enableScrollWheelZoom"
          :enable-continuous-zoom="mapSetting.enableContinuousZoom"
          :enable-double-click-zoom="mapSetting.enableDoubleClickZoom"
          :enable-keyboard="mapSetting.enableKeyboard"
          :enable-pinch-to-zoom="mapSetting.enablePinchToZoom" :enable-traffic="mapSetting.enableTraffic"
          @initd="handleInitd"
        >
          <template v-for="(item, index) in pageData.tableData" :key="index">
            <BMarker :position="{ lat: item.lat, lng: item.lng }" icon="end" />
          </template>
        </BMap>
      </page-main>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.all-page {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;

  .page-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;

    .page-top {
      margin-top: 5px;
      padding-left: 20px;
      padding-right: 20px;
    }

    .page-main {
      flex: 1;
      overflow: auto;
      margin-bottom: 5px;
      margin-top: 5px;
      padding-top: 5px;
    }

    .page-opration-container {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 5px;
    }
  }

  .right-side {
    flex: 3;
    display: flex;
    flex-direction: column;

    .side-top {
      background-color: white;
      padding-top: 5px;
      margin-top: 5px;
      margin-right: 20px;
      padding-left: 5px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .page-main {
      flex: 1;
      margin-bottom: 10px;
      margin-top: 5px;
      padding-top: 5px;
      padding-bottom: 5px;
      margin-left: 0;
      position: relative;
    }
  }
}

.map-wrapper {
  display: flex;
  justify-content: space-between;
}

.map-wrapper .map-item {
  flex-basis: calc(50% - 7.5px);
}
</style>
